<template>
  <div class="header_top">
    <div class="navigate" :style="{width:headerwidth}">
        <a-row type="flex" justify="center" align="top">
            <a-col :span="4">
                <div class="logo">
                   
                </div>
            </a-col>
            <a-col :span="12">
                <ul>
                    <li @click="goindex">首页</li>
                    <li><a-dropdown>
                            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                                课程分类<a-icon type="down" />
                            </a>
                            <a-menu slot="overlay">
                            <a-menu-item  v-for="(item,index) in depatt" :key="index" @click="golistt(item)">
                                <a target="_blank" rel="noopener noreferrer" >{{item}}</a>
                            </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </li>
                    <li @click="goAreaRank">部门排行</li>
                </ul>
            </a-col>
            <a-col :span="4">
                <div class="search">
                <a-input-search placeholder="搜索课程或讲师" style="width: 200px" @search="onSearch" />
                </div>
            </a-col>
            <a-col :span="4" style="text-align:right">
                <div class="rrrrrraa">
                    <a-avatar size="large" :src="imaaa" />
                    <div class="userrrrcenter">
                        <a-dropdown>
                            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                            {{nana}}<a-icon type="down" />
                            </a>
                            <a-menu slot="overlay">
                            <a-menu-item @click="gocenter">
                                个人中心
                            </a-menu-item>
                            <a-menu-item @click="loginOut">
                                <a href="javascript:;">退出</a>
                            </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                </div>
            </a-col>
        </a-row>
    </div>
  </div>
</template>

<script>
import {getuserinfoData,getdepartmentData,searchData} from '../../api/usercenter'
export default {
    data() {
        return {
            imaaa:'',
            depatt:[],
            nana:'',
            condition:'',
            searchlist:[]
        };
    },
    created(){
        getdepartmentData().then(res=>{
            this.depatt = res
        })
    },
    mounted(){
        getuserinfoData().then(res=>{
            this.imaaa = res.image_url
            if(res.nickname==''){
                this.nana = res.name
            }else{
                this.nana = res.nickname
            }
        })
    },
    methods: {
        callback(key) {
        },
        loginOut(){
            localStorage.clear()
            this.$router.push({
                path:'/'
            })
        },
        golistt(val){
            this.$router.push({path:'/morelist',query:{area:val}})
        },
        onSearch(value) {
            this.$router.push({path:'/search'})
            this.condition = value
            this.searchall()
        },
        searchall(){
            searchData(this.condition).then(res=>{
                this.searchlist = res
                this.$store.commit('sealllist',this.searchlist)
            })
        },
        gocenter(){
            this.$router.push({path:'/usercenter'})
        },
        goindex(){
            this.$router.push({path:'/banner'})
        },
        goAreaRank(){
            this.$router.push({path:'/arearanktotal'})
        }
    },
    computed:{
        headerwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
};
</script>

<style lang='less'>
.header_top{
    margin-top: 2vh;
    padding: 2vh 0 3vh 0;
    background: white;
    .navigate{
        height: 5vh;
        line-height: 5vh;
        margin: 0 auto;
        .logo{
            width: 100%;
            height: 5vh;
            margin-top: 6px;
            line-height: 5vh;
           background: url('../../assets/img/gaojielogo.png') no-repeat;
           background-size: 100% 100%;
        }
        ul{
            li{
                text-align: center;
                list-style: none;
                    width: 115px;
                font-size: 1.2rem;
                font-weight: bold;
                display: inline-block;
                color: black;
            }
            li:hover{
                color: skyblue;
            }
            a, area, button, [role='button'], input:not([type='range']), label, select, summary, textarea{
                color: black;
            }
        }
        .userrrrcenter{
            display: inline-block;
            margin-left: 1vw;
            a:nth-of-type(1){
                font-size: 20px;
            }
        }
        .search{
            margin-top: 1vh;
        }
    }
    
}
</style>